<script setup>
import BooleanNodeDrag from './cmp/BooleanNodeDrag.vue';
import ChainNodeDrag from './cmp/ChainNodeDrag.vue';
import CommonNodeDrag from './cmp/CommonNodeDrag.vue';
import ForNodeDrag from './cmp/ForNodeDrag.vue';
import IfNodeDrag from './cmp/IfNodeDrag.vue';
import IteratorNodeDrag from './cmp/IteratorNodeDrag.vue';
import SwitchNodeDrag from './cmp/SwitchNodeDrag.vue';
import WhileNodeDrag from './cmp/WhileNodeDrag.vue';
import AndNodeDrag from './group/AndNodeDrag.vue';
import ContextNodeDrag from './group/ContextNodeDrag.vue';
import NotNodeDrag from './group/NotNodeDrag.vue';
import NoteNodeDrag from './group/NoteNodeDrag.vue';
import OrNodeDrag from './group/OrNodeDrag.vue';
import RouterNodeDrag from './group/RouterNodeDrag.vue';
import SubVarNodeDrag from './group/SubVarNodeDrag.vue';
import SubflowNodeDrag from './group/SubflowNodeDrag.vue';
import ThenNodeDrag from './group/ThenNodeDrag.vue';
import WhenNodeDrag from './group/WhenNodeDrag.vue';
import BooleanScriptNodeDrag from './script/BooleanScriptNodeDrag.vue';
import CommonScriptNodeDrag from './script/CommonScriptNodeDrag.vue';
import ForScriptNodeDrag from './script/ForScriptNodeDrag.vue';
import IfScriptNodeDrag from './script/IfScriptNodeDrag.vue';
import IteratorScriptNodeDrag from './script/IteratorScriptNodeDrag.vue';
import SwitchScriptNodeDrag from './script/SwitchScriptNodeDrag.vue';
import WhileScriptNodeDrag from './script/WhileScriptNodeDrag.vue';

</script>

<template>
  <aside class="ivy-aside-scrollbar" style="overflow: hidden auto;user-select:none">
    <vs-collapse type="margin" class="ivy-collapse" :open-hover="false">
      <vs-collapse-item open>
       <template #header>
         <div>
          组件
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <CommonNodeDrag />
        <SwitchNodeDrag />
        <IfNodeDrag />
        <BooleanNodeDrag />
        <WhileNodeDrag />
        <ForNodeDrag />
        <IteratorNodeDrag />
        <ChainNodeDrag />
       </span>
     </vs-collapse-item>
     <vs-collapse-item open v-if="false">
       <template #header>
         <div>
          脚本
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <CommonScriptNodeDrag />
        <SwitchScriptNodeDrag />
        <IfScriptNodeDrag />
        <BooleanScriptNodeDrag />
        <WhileScriptNodeDrag />
        <ForScriptNodeDrag />
        <IteratorScriptNodeDrag />
       </span>
     </vs-collapse-item>
     <vs-collapse-item open>
       <template #header>
         <div>
          其他
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <ContextNodeDrag />
        <RouterNodeDrag />
        <SubflowNodeDrag />
        <SubVarNodeDrag />
        <WhenNodeDrag />
        <ThenNodeDrag />
        <NoteNodeDrag />
        <AndNodeDrag />
        <OrNodeDrag />
        <NotNodeDrag />
       </span>
     </vs-collapse-item>
     <vs-collapse-item open v-if="false">
       <template #header>
         <div> 降级组件 </div>
       </template>
       <span style="padding-block-end: 8px;">

       </span>
     </vs-collapse-item>
     <vs-collapse-item open>
       <template #header>
         <div>
          自定义组件
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        
       </span>
     </vs-collapse-item>
    </vs-collapse>
  </aside>
</template>

<style scoped>
.ivy-collapse{
  padding: 0 !important;
}

.ivy-collapse .vs-collapse-item{
  margin: 0 !important;
  background-color: transparent;
  box-shadow: none;
}

.ivy-aside-scrollbar{
  block-size: calc(100vh - 240px);
}

/* 只针对具有ivy-aside-scrollbar类的元素的滚动条宽度 */
.ivy-aside-scrollbar::-webkit-scrollbar {
  inline-size: 0;
}

</style>
